<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="ThemeBucket">
    <link rel="shortcut icon" href="#" type="image/png">

    <title>院系管理</title>

    <!--dynamic table-->
    <link href="js/advanced-datatable/css/demo_page.css" rel="stylesheet"/>
    <link href="js/advanced-datatable/css/demo_table.css" rel="stylesheet"/>

    <div th:include="common/common.html :: commonheader"></div>

</head>

<body class="sticky-header">

<section>
    <!-- left side start-->
    <div th:replace="common/common.html :: #leftmenu"></div>
    <!-- left side end-->

    <!-- main content start-->
    <div class="main-content">

        <!-- header section start-->
        <div th:replace="common/common.html :: headermenu"></div>
        <!-- header section end-->

        <!-- page heading start-->
        <div class="page-heading">
            <h3>
                院系管理
            </h3>
            <ul class="breadcrumb">
                <li>
                    <a href="#">学籍管理系统</a>
                </li>
                <li>
                    <a href="#">院系管理</a>
                </li>
                <li class="active">院系信息</li>
            </ul>
        </div>
        <!-- page heading end-->

        <!--body wrapper start-->
        <div class="wrapper">
            <div class="row">
                <div class="col-sm-12">
                    <header class="panel-heading">
                        专业信息表
                    </header>
                    <div class="panel-body">
                        <div class="adv-table">
                            <!-- 添加按钮 -->
                            <button id="department_add_btn" type="button" class="btn btn-success" data-toggle="modal"
                                    data-target="#department_add_modal">
                                添加记录
                            </button>
                            <button class="btn btn-danger" id="department_delete_all">批量删除</button>
                            <!-- 新增模态框 -->
                            <div class="modal fade" id="department_add_modal" tabindex="-1" role="dialog"
                                 aria-labelledby="myModalLabel">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span></button>
                                            <h4 class="modal-title" id="myModalLabel">院系添加</h4>
                                        </div>

                                        <div class="modal-body">
                                            <form class="form-horizontal" name="department_form" id="department_form"
                                                  method="post">
                                                <div class="form-group">
                                                    <label for="dName_form" class="col-sm-2 control-label">*院系名称</label>
                                                    <div class="col-sm-10">
                                                        <input type="text" class="form-control" name="dName"
                                                               id="dName_form"
                                                               placeholder="院系名称" required="required">
                                                        <span id="span" style="color: red"></span>
                                                    </div>
                                                </div>

                                            </form>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" id="department_cancel"
                                                    data-dismiss="modal">取消
                                            </button>
                                            <button type="submit" class="btn btn-primary" id="department_add">确认
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- 更改模态框 -->
                            <div class="modal fade" id="department_update_modal" tabindex="-1" role="dialog"
                                 aria-labelledby="myModalLabel1">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span></button>
                                            <h4 class="modal-title" id="myModalLabel1">院系添加</h4>
                                        </div>

                                        <div class="modal-body">
                                            <form class="form-horizontal" name="department_form"
                                                  id="department_form_update"
                                                  method="post">
                                                <div class="form-group">
                                                    <label for="dName_form" class="col-sm-2 control-label">*院系名称</label>
                                                    <div class="col-sm-10">
                                                        <input type="text" class="form-control" name="dName"
                                                               id="dName_form_update"
                                                               placeholder="院系名称" required="required">
                                                        <span id="span_update" style="color: red"></span>
                                                    </div>
                                                </div>

                                            </form>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" id="department_update_cancel"
                                                    data-dismiss="modal">取消
                                            </button>
                                            <button type="submit" class="btn btn-primary" id="department_update">确认
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <table class="display table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th style="text-align: center" width="20px">
                                        <input type="checkbox" id="check_all"/>
                                    </th>
                                    <th style="text-align: center">院系编号</th>
                                    <th style="text-align: center">院系名称</th>
                                    <th style="text-align: center">创立时间</th>
                                    <th style="text-align: center">操作</th>
                                </tr>
                                </thead>
                                <tbody id="department_table_tbody">
                                </tbody>
                            </table>
                            <div class="row-fluid" id="page_info">
                            </div>
                            <div class="row-fluid" id="page_nav">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--body wrapper end-->

        <!--footer section start-->
        <div th:replace="common/common.html :: footer"></div>
        <!--footer section end-->


    </div>
    <!-- main content end-->
</section>

<!-- Placed js at the end of the document so the pages load faster -->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/modernizr.min.js"></script>
<script src="js/jquery.nicescroll.js"></script>

<!--dynamic table-->
<script type="text/javascript" language="javascript" src="js/advanced-datatable/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="js/data-tables/DT_bootstrap.js"></script>
<!--dynamic table initialization -->
<script src="js/dynamic_table_init.js"></script>

<!--common scripts for all pages-->
<script src="js/scripts.js"></script>

<script type="text/javascript">
    $(function () {
            to_page(1);
            var totalPage;
            var currentPage;

            // 获取解析院系数据
            function build_department_table(data) {
                // 清空原来的数据
                $("#department_table_tbody").empty();
                let departments = data.extend.departments;
                $.each(departments, function (index, item) {
                    let checkBox = $("<td><input type='checkbox' class='check_item'/></td>");
                    let dId = $("<td style=\"text-align: center\"></td>").append(item.did);
                    let dName = $("<td style=\"text-align: center\"></td>").append(item.dname);
                    let dDate = $("<td style=\"text-align: center\"></td>").append(item.ddate);
                    let updateBtn = $("<button></button>").addClass("btn btn-info update_btn").append("修改").attr("update_btn", item.did)
                        .attr("data-target", "#department_update_modal").attr("data-toggle", "modal");
                    let delBtn = $("<button></button>").addClass("btn btn-danger del_btn").append("删除").attr("del_id", item.did);
                    let btnTd = $("<td style=\"text-align: center\"></td>").append(updateBtn).append(" ").append(delBtn);
                    $("<tr></tr>").append(checkBox).append(dId).append(dName).append(dDate).append(btnTd).appendTo($("#department_table_tbody"));
                });
            }

            // 解析显示分页数据
            function build_page_info(result) {
                let page_info = $("#page_info");
                //清空跳行条内容
                page_info.empty();
                // 获取总记录条数
                let total = result.extend.page.total;
                // 获取当前页
                let current = result.extend.page.current;
                currentPage = current;
                // 获取最大页数
                let pages = parseInt(result.extend.page.total / result.extend.page.size);
                if (result.extend.page.total % result.extend.page.size !== 0) {
                    pages++;
                }
                totalPage = pages;
                page_info.append("当前第" + current + "页,共" + pages + "页,共条" + total + "记录");
            }

            // 解析显示分页数据
            function build_page_nav(result) {
                //获取page信息
                let page = result.extend.page
                let page_nav = $("#page_nav");
                page_nav.empty();
                let ul = $("<ul></ul>").addClass("pagination")
                // 去首页
                let firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href", "#"));
                // 上一页
                let prevPageLi = $("<li></li>").append($("<a></a>").append("&laquo;").attr("href", "#"));
                // 判断上一页能否使用
                if (page.current === 1) {
                    firstPageLi.addClass("disabled");
                    prevPageLi.addClass("disabled");
                } else {
                    firstPageLi.click(function () {
                        to_page(1);
                    });
                    prevPageLi.click(function () {
                        to_page(page.current - 1);
                    });
                }
                ul.append(firstPageLi).append(prevPageLi);


                // 下一页
                let nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;").attr("href", "#"));
                // 末页
                let lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href", "#"));
                // 判断下一页和末页是否生效
                if (page.current === page.pages) {
                    nextPageLi.addClass("disabled");
                    lastPageLi.addClass("disabled");
                } else {
                    nextPageLi.click(function () {
                        to_page(page.current + 1);
                    });
                    lastPageLi.click(function () {
                        to_page(page.pages);
                    });
                }

                // // 中间页码
                if (page.pages <= 5) {
                    for (let pageNum = 1; pageNum <= page.pages; pageNum++) {
                        let numLi = $("<li></li>").append($("<a></a>").append(pageNum).attr("href", "#"));
                        if (pageNum === page.current) {
                            numLi.addClass("active");
                        }
                        numLi.click(function () {
                            to_page(pageNum);
                        });
                        ul.append(numLi);
                    }
                } else if (page.pages > 5 && page.current < 3) {
                    for (let pageNum = 1; pageNum <= 5; pageNum++) {
                        let numLi = $("<li></li>").append($("<a></a>").append(pageNum).attr("href", "#"));
                        if (pageNum === page.current) {
                            numLi.addClass("active");
                        }
                        numLi.click(function () {
                            to_page(pageNum);
                        });
                        ul.append(numLi);
                    }
                } else if (page.pages > 5 && page.current <= page.pages - 2) {
                    for (let pageNum = page.current - 2; pageNum <= page.current + 2; pageNum++) {
                        let numLi = $("<li></li>").append($("<a></a>").append(pageNum).attr("href", "#"));
                        if (pageNum === page.current) {
                            numLi.addClass("active");
                        }
                        numLi.click(function () {
                            to_page(pageNum);
                        });
                        ul.append(numLi);
                    }
                } else if (page.pages > 5 && page.current > page.pages - 2) {
                    for (let pageNum = page.current - 4; pageNum <= page.pages; pageNum++) {
                        let numLi = $("<li></li>").append($("<a></a>").append(pageNum).attr("href", "#"));
                        if (pageNum === page.current) {
                            numLi.addClass("active");
                        }
                        numLi.click(function () {
                            to_page(pageNum);
                        });
                        ul.append(numLi);
                    }
                }

                ul.append(nextPageLi).append(lastPageLi);
                let nav = $("<nav></nav>").attr("aria-label", "Page navigation").attr("style", "float: right");
                nav.append(ul);
                nav.appendTo(page_nav);
            }

            function to_page(pn) {
                $.ajax({
                    url: "/department",
                    data: "pn=" + pn,
                    type: "GET",
                    success: function (result) {
                        // 1.解析并显示员工数据局
                        build_department_table(result);
                        // 分页数据
                        build_page_info(result);
                        // 导航条
                        build_page_nav(result);
                        $("#check_all").prop("checked", "");
                        $("#department_add").removeClass("disabled");
                        $("#department_update").removeClass("disabled");
                    }
                })
            }

            // 删除数据
            $(document).on("click", ".del_btn", function () {
                let dName = $(this).parents("tr").find("td:eq(2)").text();
                if (confirm("您确定删除【" + dName + "】吗?")) {
                    let dId = $(this).attr("del_id");
                    $.ajax({
                        url: "/department/" + dId,
                        type: "DELETE",
                        success: function (result) {
                            alert(result.extend.msg);
                            to_page(currentPage);
                        }
                    });
                }
            });

            // 点击修改按钮
            $(document).on("click", ".update_btn", function () {
                let dName = $(this).parents("tr").find("td:eq(2)").text();
                let dId = $(this).parents("tr").find("td:eq(1)").text();
                $("#department_update").attr("update_dId", dId);
                $("#dName_form_update").val(dName);
                $("#span_update").text("");
            });

            // 点击确定修改按钮
            $("#department_update").click(function () {
                // 拿到模态框中的数据
                let dId = $("#department_update").attr("update_dId");
                let data = $("#department_form_update").serialize() + "&_method=PUT";
                $.ajax({
                    url: "/department/" + dId,
                    data: data,
                    type: "PUT",
                    success: function (result) {
                        rest_form("#department_form_update")
                        $("#department_update_modal").modal("hide");
                        alert("修改成功");
                        to_page(currentPage);
                    }
                })
            });

            // 全选功能
            $("#check_all").click(function () {
                let checked = $(this).prop("checked");
                $(".check_item").prop("checked", checked);
            });

            // 判断dept是否已经存在
            $("#dName_form").change(function () {
                // 发送Ajax请求 验证数据是否已经存在
                $("#department_add").removeClass("disabled");
                $("#department_update").removeClass("disabled");
                let deptName = this.value;
                $("#span").text("");
                $.ajax({
                    url: "/checkDept?deptName=" + deptName,
                    // date: {"deptName": deptName},
                    type: "POST",
                    success: function (data) {
                        let code = data.code;
                        if (code === 500) {
                            let msg = data.extend.va_msg;
                            $("#department_add").addClass("disabled");
                            $("#span").text(msg);
                        }
                    }
                });
            });

            $("#dName_form_update").change(function () {
                // 发送Ajax请求 验证数据是否已经存在
                $("#department_add").removeClass("disabled");
                $("#department_update").removeClass("disabled");
                let deptName = this.value;
                $("#span_update").text("");
                $.ajax({
                    url: "/checkDept?deptName=" + deptName,
                    // date: {"deptName": deptName},
                    type: "POST",
                    success: function (data) {
                        let code = data.code;
                        if (code === 500) {
                            let msg = data.extend.va_msg;
                            $("#department_update").addClass("disabled");
                            $("#span_update").text(msg);
                        }
                    }
                });
            });

            //完成批量删除功能
            $("#department_delete_all").click(function () {
                let deptNames = "";
                let deptIds = "";
                $.each($(".check_item:checked"), function () {
                    deptNames += $(this).parents("tr").find("td:eq(2)").text() + ",";
                    deptIds += $(this).parents("tr").find("td:eq(1)").text() + "-";
                });
                // 去除deptNames中多余的,
                deptNames = deptNames.substring(0, deptNames.length - 1);
                deptIds = deptIds.substring(0, deptIds.length - 1)
                if (confirm("你确定要删除【" + deptNames + "】吗?")) {
                    // 发送Ajax请求
                    $.ajax({
                        url: "/department/" + deptIds,
                        type: "DELETE",
                        success: function (result) {
                            alert("删除成功");
                            to_page(currentPage);
                        }
                    });
                }
            });

            // 清除表单数据
            function rest_form(ele) {
                $(ele)[0].reset();
                // 清空表单样式
                $(ele).find("*").removeClass("has-success has-error");
                $(ele).find(".help-block").text("");
            }

            // 取消添加
            $("#department_cancel").click(function () {
                rest_form("#department_add_modal form")
                $("#department_add_modal").modal("hide");
                $("#department_add").removeClass("disabled");
            });

            // 添加数据
            $("#department_add").click(function () {
                let data = $("#department_add_modal form").serialize();
                rest_form("#department_add_modal form")
                $("#department_add_modal").modal("hide");
                $.ajax({
                    url: "/department",
                    type: "POST",
                    data: data,
                    success: function (result) {
                        alert("添加成功");
                        to_page(totalPage);
                        to_page(totalPage);
                    }
                })
            });

            $("#department_add_btn").click(function () {
                $("#dName_form").text(" ");
                $("#error_span").text(" ");
                $("#department_add").removeClass("disabled");
                $("#span").text("");
            });

            focus($("#dName_form"));
            focus($("#dName_form_update"));

            function focus(ele) {
                ele.focusin(function () {
                    $(this).select();
                });
            }

        }
    )
</script>

</body>
</html>
